<template>
    <client-only>
        <div class="bs-form">

            <search-item class="left-pad" label="选择标书代检对象：" v-model="ptType" :data="ptlist" @input="ptHandler" @click="ptChange"
                :isShowAll="false"></search-item>

            <my-form class="section-form" label-width="80px" ref="form" v-model="form" @submit="submitHandler" labelPosition="left" v-show="ptType == '2'">

                <div class="group left-pad">
                    
                    <expert-number :data="zjdjList" :SumNum.sync="amount" :seniornum.sync="form.seniornum" :middlenum.sync="form.middlenum" :props="{label: 'name',value: 'code',}" class="expert-num"></expert-number>

                    <el-form-item label="上传资料：" class="group-title" label-width="86px">
                        <div class="file-limit">
                            上传PDF格式&nbsp;&nbsp;小于100M文件
                        </div>
                    </el-form-item>

                    <el-form-item label="投标文件">
                        <upload-s ref="tbFile" single :filesize="100" filetype=".pdf" :fileguid="form.fileguid" :extra="{typecode: 'tbwj', fjtype: 'tbwj',}"
                            :before-select-file="beforeSelectTbFile" isShowIcon></upload-s>
                    </el-form-item>

                    <el-form-item label="招标文件">
                        <upload-s ref="zbFile" single :filesize="100" filetype=".pdf" :fileguid="form.zbwjfileguid" :extra="{typecode: 'zbwj', fjtype: 'zbwj',}"
                            isShowIcon></upload-s>
                    </el-form-item>

                    <el-form-item label="相关资料：" class="group-title" label-width="86px">
                        <div class="file-limit">
                            如有澄清文件/补遗文件，请上传完整，以免影响标书检查结果
                        </div>
                    </el-form-item>

                    <el-form-item label="澄清文件">
                        <upload-s ref="cqFile" single :filesize="100" filetype=".pdf" :fileguid="form.cqwjfileguid" :extra="{typecode: 'cqwj', fjtype: 'cqwj',}"
                            isShowIcon></upload-s>
                    </el-form-item>

                    <el-form-item label="补遗文件">
                        <upload-s ref="byFile" :limit="6" :filesize="100" filetype=".pdf" :fileguid="form.bywjfileguid"
                            :extra="{typecode: 'bywj', fjtype: 'bywj',}" isShowIcon></upload-s>
                    </el-form-item>

                </div>

                <div class="form-bot left-pad">
                    <div class="info-feedback">
                        预计反馈时间：支付完成后24小时内
                    </div>
                    <div>
                        实际支付：<span class="amount">¥{{amount}}</span>
                    </div>

                    <div class="mobile-yzm" >
                        <input-mobile-yzm v-if="!isLogin && ptType == '2'" ref="sign" prompt="此手机号用于平台登录,登录后可以查看订单进度"></input-mobile-yzm>
                    </div>
                </div>

                <template slot="btn" slot-scope="scope">
                    <el-button type="primary" size="large" @click="scope.submitHandler" class="form-bot-btn">
                        提交并支付
                    </el-button>
                </template>

            </my-form>


            <dialog-clause v-model="dialogVisibleClause" agree @click="agreeHandler" title="投标文件检查服务协议" type="file-check"></dialog-clause>

            <!-- 调用支付 -->
            <dialog-pay ref="payer" @success="paySuccessHandler" @closeNoPay="closeNoPay"></dialog-pay>

            <div class="ptfws" v-show="ptType == '1'">
                <search-box class="fws-box" v-model="ptfws" :data="providerlist" itemType="img" :props="{label: 'name',value: 'name',}" :isShowLabel="false"
                    :isShowAll="false" @click="fwsChange"></search-box>
                <div v-if="!!fwsMobile" class="fws-details">
                    <p>请电话联系该平台服务商，提供标书代检服务</p>
                    <div class="fws-mobile">
                        联系电话: {{fwsMobile}}
                    </div>
                </div>
            </div>
        </div>
    </client-only>
</template>

<script>
import DialogClause from '@components/sys/dialog-clause';

import TitleDivider from '../../components/title-divider';
import UploadS from '../../components/upload-s/index.vue';

import SearchItem from '../../components/search-item.vue';
import SearchBox from '../../components/search-box.vue';
import dialogPay from '../../components/dialog-pay.vue';
import ExpertNumber from '../../components/expert-number.vue';

export default {
    props: {
        isLogin: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        DialogClause,
        TitleDivider,
        UploadS,
        SearchItem,
        SearchBox,
        dialogPay,
        ExpertNumber,
    },
    data() {
        return {
            form: {
                expertposition: 'senior',
                expertnum: '',
                fileguid: '',
                zbwjfileguid: '',
                cqwjfileguid: '',
                bywjfileguid: '',
            },

            dialogVisibleClause: false,
            dialogVisibleCdkey: true,

            ptType: '2',
            ptlist: [
                // { dicname: '平台服务商', diccode: '1' },
                { dicname: '平台专家', diccode: '2' },
            ],
            zjdjList: [],
            providerlist: [],
            ptfws: '',
            isFwsMobile: true,
            fwsMobile: '',
            feedBackTime: '',
            amount:0,
            unitPrice: 0, // 单价
        };
    },
    computed: {
        // amount() {
        //     let anmout = this.unitPrice * this.form.expertnum || 0;
        //     return anmout;
        // },
    },
    methods: {
        ptHandler() {},
        ptChange() {},
        //支付成功回调
        paySuccessHandler() {
            console.log('支付成功');

            //支付成功
            this.$emit('update');
            this.initHandler();
            showMsgBox('支付成功，请等待受理!', 'success', () => {
                if (!this.isLogin) {
                    window.location.reload();
                }
            });
            this.clearFrom();
        },

        // 清除表单
        clearFrom() {
            this.initHandler();
            this.form.expertposition = '';
            this.form.expertnum = '';
        },

        // 提交 校验
        submitHandler() {
            new Chain()
                .link((next) => {
                    if (this.form.seniornum == 0  && this.form.middlenum == 0) {
                        showMsgBox('专家数量不能为0，请选择专家', 'error');
                        return;
                    }
                    next();
                })
                .link((next) => {
                    if (!this.$refs.tbFile.exist) {
                        showMsgBox('请上传投标文件', 'error');
                        return;
                    }
                    next();
                })
                .link((next) => {
                    if (!this.$refs.zbFile.exist) {
                        showMsgBox('请上传招标文件', 'error');
                        return;
                    }
                    next();
                })
                .link((next) => {
                    if (this.isLogin) {
                        next();
                    } else {
                        this.$refs.sign.login(() => {
                            next();
                        });
                    }
                })
                .link((next) => {
                    this.dialogVisibleClause = true;
                    // this.dialogVisibleProduct = true;
                })
                .run();
        },

        // 同意 服务与协议
        agreeHandler() {
            new Chain()
                .link((next) => {
                    this.dialogVisibleClause = false;
                    next();
                })
                .link((next) => {
                    this.cdkeyHandler();
                })
                .run();
        },

        //提交 表单，调起支付。
        cdkeyHandler(keyForm) {
            this.dialogVisibleCdkey = false;

            var { cqwjfileguid, bywjfileguid, ...paramData } = this.form;

            if (this.$refs.cqFile.exist) {
                paramData.cqwjfileguid = cqwjfileguid;
            }
            if (this.$refs.byFile.exist) {
                paramData.bywjfileguid = bywjfileguid;
            }

            this.$post(`${this.$store.state.api.webUrl}/tbfile/check/add.json`, paramData, (data) => {
                showMsg('添加成功', 'success');
                
                //支付参数
                let proData = {
                    projecttype: 'tender_examine',
                    projectnames: '标书检查',
                    projectids: data.rowguid,
                    realamount: data.payamount,
                    productnum: 1,
                };
                // 调起支付
                this.$refs.payer.initHandler(proData);
            });
        },

        // 初始化表单
        initHandler() {
            this.$get(`${this.$store.state.api.webUrl}/tbfile/check/getguid.json`, (data) => {
                data.middlenum = 0;
                data.seniornum = 0;
                this.form = data;
            });
        },

        // 选择投标文件前
        beforeSelectTbFile(cb) {
            showConfirm('请确认投标文件的报价信息是否清除，系统默认上传的投标文件里的报价信息为虚假数据。', '', () => {
                cb();
            });
        },

        //获取类型
        getType() {
            this.$get(`${this.$store.state.api.webUrl}/tbfile/check/gettype.json`, (data) => {
                this.zjdjList = data.expert;
                this.providerlist = data.providerlist;
                if (data.providerlist[0]) {
                    this.ptfws = data.providerlist[0].name;
                    this.fwsMobile = data.providerlist[0].contact;
                }
            });
        },

        //获取预估价格
        getPrice() {
            if (!!this.form.expertposition && !!this.form.expertnum) {
                // 发送请求
            }
        },

        fwsChange(val) {
            this.isFwsMobile = true;
            this.fwsMobile = val.contact;
        },

        //未支付成功
        closeNoPay() {
            showMsgBox('检测到您取消支付，在个人中心可以查看到此订单，半个小时内可继续完成支付');
        },

        //日期 +1
        getNewDayAdd() {
            let dateTemp = new Date();

            dateTemp = +dateTemp + 1000 * 60 * 60 * 24;
            dateTemp = new Date(dateTemp);

            let targetDate = dateTemp.getFullYear() + '-' + (dateTemp.getMonth() + 1) + '-' + dateTemp.getDate() + ' 15:00:00';

            return targetDate;
        },
    },
    mounted() {
        this.getType();
        this.initHandler();
        this.feedBackTime = this.getNewDayAdd();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.bs-form {
    padding-top: 30px;
    .left-pad {
        padding: 0 27px;
    }
}
.section-form {
    // margin-bottom: 20px;
    position: relative;
    .expert-num{
        margin: 15px 0;
    }

    .zj-box {
        margin-bottom: 20px;
    }

    .group {
        margin: 20px 0;
    }

    .file-limit {
        font-size: 14px;
        // color: $dangerColor;
        font-weight: normal;
    }
    .form-bot {
        // height: 145px;
        // background-color: #f9fbff;
        background-color: #edf1fa; //#ebf1fd
        font-size: 16px;
        padding-top: 20px;
        .info-feedback {
            cursor: default;
            margin-bottom: 10px;
        }
        .amount {
            color: red;
            font-size: 18px;
        }
    }

    .form-bot-btn {
        position: absolute;
        bottom: 25px;
        right: 500px;
        padding: 12px 60px;
    }
    ::v-deep .btn-row {
        margin: 0px;
    }
    ::v-deep .el-input-number{
        width: 86px;
    }

    ::v-deep .el-input-number .el-input__inner {
        // border-top: none;
        // border-right: none;
        // border-left: none;
        // border-radius: 0;
        // text-align: left;
        // background-color: rgba($color: #fff, $alpha: 0);
        // padding: 0 10px;
        // width: 80px;
    }

    ::v-deep .el-form-item__label {
        // font-weight: 600;
        font-size: 14px;
        color: #252525;
        padding: 0 6px 0 0;
    }

    ::v-deep .group-title {
        .el-form-item__label {
            font-size: 16px;
            font-weight: 600;
        }
    }
    ::v-deep .weight-title {
        .el-form-item__label {
            font-weight: 600;
        }
    }
}
.ptfws {
    min-height: 200px;
    .fws-item {
        font-size: 14px;
        line-height: 1.6;
        margin: 12px 6px;
    }
    .fws-box {
        margin: 20px 0;
    }
    .fws-details {
        text-align: center;
        .fws-mobile {
            margin: 20px auto;
            width: 240px;
            border: 1px solid #333;
            border-radius: 5px;
            padding: 10px 20px;
        }
    }
}

.mobile-yzm {
    margin-top: 20px;
    padding-bottom: 80px !important;
}
</style>